
{extend name="common/form" /}
{block name="form" /}
<style type="text/css">

    #toolControl {
        position: absolute;
        top: 10px;
        left: 0px;
        right: 0px;
        margin: auto;
        width: 168px;
        z-index: 1001;
    }
    .toolItem {
        width: 30px;
        height: 30px;
        float: left;
        margin: 1px;
        padding: 4px;
        border-radius: 3px;
        background-size: 30px 30px;
        background-position: 4px 4px;
        background-repeat: no-repeat;
        box-shadow: 0 1px 2px 0 #E4E7EF;
        background-color: #ffffff;
        border: 1px solid #ffffff;
    }
    .toolItem:hover {
        border-color: #789CFF;
    }
    .active {
        border-color: #D5DFF2;
        background-color: #D5DFF2;
    }

    #marker {
        background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/marker_editor.png');
    }
    #polyline {
        background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/polyline.png');
    }
    #polygon {
        background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/polygon.png');
    }
    #circle {
        background-image: url('https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/circle.png');
    }
</style>
<div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
    <div class="widget am-cf">
        <div class="widget-head am-cf">

            <div class="widget-title am-fl">添加区域</div>
            <div class="widget-function am-fr">
                <a href="javascript:;" class="am-icon-cog"></a>
            </div>
        </div>
        <div class="widget-body am-fr">
            <form class="am-form tpl-form-border-form tpl-form-border-br">
                <input type="hidden" name="id" value="{$info.id}">                <div class="am-form-group">
                <label for="user-name" class="am-u-sm-3 am-form-label">
                    区域                    </label>
                <div class="am-u-sm-9">
                    <input type="text" name="name" value="{$info.name|default=''}" required="required" class="tpl-form-input" placeholder="请填写区域">
                </div>
            </div>
                <div class="am-form-group">
                    <label for="user-name" class="am-u-sm-3 am-form-label">
                        是否开启                    </label>
                    <div class="am-u-sm-9">
                        <div class="tpl-switch">
                            <input type="checkbox" name="open"  class="ios-switch bigswitch tpl-switch-btn am-margin-top-xs" {present name='$info.open'}{eq name='$info.open' value="1"}checked{/eq} {else /}checked{/present}>
                            <div class="tpl-switch-btn-view">
                                <div></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="am-form-group">
                    <label for="user-name" class="am-u-sm-3 am-form-label">
                        框选区域
                    </label>
                    <div class="am-u-sm-9" >

                        <div style="height: 650px;" id="container"></div>
                        <div>
                            绘制：鼠标左键点击及移动即可绘制图形<br/>
                            结束绘制：鼠标左键双击即可结束绘制折线、多边形、多边形会自动闭合；圆形单击即可结束<br/>
                            中断：绘制过程中按下esc键可中断该过程
                        </div>
                    </div>
                </div>
                <input type="hidden" name="location" value='{:json_encode($list)}'>
                <div class="am-form-group">
                    <div class="am-u-sm-9 am-u-sm-push-3">
                        <button type="button" onclick="add('{:url("")}','form')"
                                class="am-btn am-btn-primary tpl-btn-bg-color-success">
                            提交
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<!--上面这个是别人的key-->
{/block}
{block name='script'}





<script charset="utf-8" src="https://map.qq.com/api/gljs?libraries=tools&v=1.exp&key=CP4BZ-NH6HJ-YINF2-K7PXT-GFAGZ-DJFOE"></script>
<script type="text/javascript">
    var map, editor;

    function initMap() {
        // 初始化地图
        map = new TMap.Map("container", {
            zoom: 10, // 设置地图缩放级别
            center: new TMap.LatLng({$list[0]['lat']},{$list[0]['lng']}) // 设置地图中心点坐标
        });

        var simplePath = [
            {foreach $list as $v}
                new TMap.LatLng({$v.lat},{$v.lng}),
            {/foreach}


        ];

        var label = new TMap.MultiLabel({
            id: 'label-layer',
            map: map,
            styles: {
                'label': new TMap.LabelStyle({
                    'color': '#3777FF', //颜色属性
                    'size': 20, //文字大小属性
                    'offset': { x: 0, y: 0 }, //文字偏移属性单位为像素
                    'angle': 0, //文字旋转属性
                    'alignment': 'center', //文字水平对齐属性
                    'verticalAlignment': 'middle' //文字垂直对齐属性
                })
            },
            geometries: [{
                'id': 'label', //点图形数据的标志信息
                'styleId': 'label', //样式id
                'position': new TMap.LatLng(30.971041322106732,104.11364122917598), //标注点位置
                'content': '{$info.name}', //标注文本
                'properties': { //标注点的属性数据
                    'title': 'label'
                }
            }]
        });
        /*  var holeyPath = [
         [
         new TMap.LatLng(40.0415122389407, 116.27144427159294),
         new TMap.LatLng(40.03854281391625, 116.27218697924695),
         new TMap.LatLng(40.03891287066983, 116.2752049655744),
         new TMap.LatLng(40.04191838125587, 116.27460372613496)
         ],
         [
         new TMap.LatLng(40.04108804322408, 116.27230486920075),
         new TMap.LatLng(40.039472465232336, 116.27267032855252),
         new TMap.LatLng(40.03972518377873, 116.2748159283218),
         new TMap.LatLng(40.04137685760844, 116.2744386798397)
         ]
         ];*/

        // 初始化几何图形及编辑器
        editor = new TMap.tools.GeometryEditor({
            map, // 编辑器绑定的地图对象
            overlayList: [ // 可编辑图层
                {
                    overlay: new TMap.MultiPolygon({
                        map,
                        styles: {
                            highlight: new TMap.PolygonStyle({
                                color: 'rgba(255, 255, 0, 0.6)'
                            })
                        },
                        geometries: [
                            {
                                paths: simplePath,
                                content: '腾讯北京总部'
                            }
                            /*,
                             {
                             paths: holeyPath
                             },*/
                        ]
                    }),
                    id: 'polygon',
                    selectedStyleId: 'highlight'
                }
            ],
            actionMode: TMap.tools.constants.EDITOR_ACTION.INTERACT, // 编辑器的工作模式
            activeOverlayId: 'polygon', // 激活图层
            selectable: true, // 开启点选功能
            snappable: true // 开启吸附
        });

        // 监听删除、修改、拆分、合并完成事件
        var evtList = ['delete', 'adjust', 'split', 'union'];
        evtList.forEach(function(evtName){
            editor.on(evtName + '_complete', function(evtResult) {

                $('input[name="location"]').val(JSON.stringify(evtResult.paths))
            console.log(evtName, evtResult);
        });
    });

        // 监听拆分失败事件，获取拆分失败原因
        editor.on('split_fail', (res) => {
            alert(res.message);
    });
        // 监听合并失败事件，获取合并失败原因
        editor.on('union_fail', (res) => {
            alert(res.message);
    });
    }
    initMap();
</script>



{/block}
{extend}
